// LoginModal.tsx
import { useState } from 'react';
import {
  CloseOutlined,
  WechatFilled,
  MobileFilled,
  QqOutlined,
} from "@ant-design/icons";
import styles from "./LoginModal.module.css";
import logo from "./images/login_logo.png";
import PhoneLoginModal from './PhoneLoginModal';

type LoginModalProps = {
  visible: boolean;
  onClose: () => void;
};

// 导出一个默认的LoginModal函数，接收一个LoginModalProps类型的参数
export default function LoginModal({ visible, onClose }: LoginModalProps) {
  // 使用useState钩子，定义一个showPhoneLogin状态，初始值为false
  const [showPhoneLogin, setShowPhoneLogin] = useState(false);

  // 如果visible为false，则返回null
  if (!visible) return null;

  // 定义一个handlePhoneLogin函数，点击手机登录按钮时，将showPhoneLogin状态设置为true
  const handlePhoneLogin = () => {
    setShowPhoneLogin(true);
  };

  // 定义一个handleClose函数，点击关闭按钮时，将showPhoneLogin状态设置为false，并调用onClose函数
  const handleClose = () => {
    setShowPhoneLogin(false);
    onClose();
  };

  // 如果showPhoneLogin为true，则返回PhoneLoginModal组件
  if (showPhoneLogin) {
    return <PhoneLoginModal 
      visible={true} 
      onClose={handleClose}
      onBack={() => setShowPhoneLogin(false)}
    />;
  }

  // 否则，返回一个包含登录方法的模态框
  return (
    <div className={styles.modalMask} onClick={handleClose}>
      <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
        <div className={styles.modalHeader}>
          <img src={logo} alt="logo" className={styles.logo} />
          <CloseOutlined className={styles.closeIcon} onClick={handleClose} />
        </div>
        <h3 className={styles.loginTitle}>3秒登录即可下载</h3>
        <div className={styles.mainContent}>
          <div className={styles.loginMethods}>
            {/* 微信登录 */}
            <div className={styles.methodItem}>
              <button className={`${styles.loginButton} ${styles.wechat}`}>
                <WechatFilled className={styles.buttonIcon} />
              </button>
              <div className={styles.buttonLabel}>微信登录</div>
            </div>

            {/* QQ登录 */}
            <div className={styles.methodItem}>
              <button className={`${styles.loginButton} ${styles.qq}`}>
                <QqOutlined className={styles.buttonIcon} />
              </button>
              <div className={styles.buttonLabel}>
                QQ登录
                <span className={styles.lastLogin}>(上次登录)</span>
              </div>
            </div>

            {/* 手机登录 */}
            <div className={styles.methodItem}>
              <button 
                className={`${styles.loginButton} ${styles.phone}`}
                onClick={handlePhoneLogin}
              >
                <MobileFilled className={styles.buttonIcon} />
                <span className={styles.recommendTag}>推荐</span>
              </button>
              <div className={styles.buttonLabel}>手机登录</div>
            </div>
          </div>

          <div className={styles.agreement}>
            注册或点击登录代表您同意
            <a href="#" className={styles.link}>
              《包图网络服务使用协议》
            </a>
            &amp;
            <a href="#" className={styles.link}>
              《包图隐私政策》
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}
